<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>jquery test 1
        <span>dfsf</span>
    </p>
    <p>jquery test 2</p>
    <p>jquery test 3</p>
    <a href="tel:10086">10086</a>
    <div id="div1">div1</div>

    <script src="./../jquery-3.3.1.js"></script>
    <!-- <script src='./my-jquery.js'></script> -->
    <script>
        //插件扩展
        // 因为只有$暴露在window全局变量上 且init.prototype=$.fn
        // 所以使用$.fn.xxx添加扩展 在实例对象上就可以统一使用了
        // 这也是添加插件的唯一入口
        // 也是为什么要把init.prototype=$.fn，而不是直接新建一个{}等于init.prototype的原因
        // 它们之间必须要有联系才行，不然不便于扩展
        $.fn.getNodeName = function () {
            console.log(this[0].nodeName);
        }
    </script>
    <!-- 验证插件扩展 -->
    <script>
        var $p = $('p');
        $p.getNodeName(); //P

        var $div1 = $('#div1')
        $div1.getNodeName();//DIV
    </script>
</body>

</html>